<!--
 * @Author: your name
 * @Date: 2019-11-19 09:25:07
 * @LastEditTime: 2019-11-23 09:43:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \YouYouFo\you-you-go\src\views\ShoppingCart.vue
 -->
<template>
  <div>
    <!-- 商品卡片 -->
    <van-card
      :num="$store.getters.getGoodsCount[item.id]"
      :price="item.sell_price"
      :title="item.title"
      :thumb="item.thumb_path"
      v-for="(item,index) in goodsList"
      :key="index"
    >
      <div slot="footer">
        {{$store.getters.getGoodsCount[item.id]}}
        <van-button @click="removeGoods(item.id,index)" style="float:left">删除</van-button>
        <van-stepper
          :name="item.id"
          @change="valueChange"
          ref="stepperRef"
          v-model="$store.getters.getGoodsCount[item.id]"
        />
        <!-- @plus="changeGoodsCount({id:item.id,count:$store.state.countObj[item.id]})"
        @minus="changeGoodsCount({id:item.id,count:$store.state.countObj[item.id]})"-->
      </div>
    </van-card>
    <!-- 提交订单-->
    <van-submit-bar
      :price="$store.getters.getTotalPrice*100"
      button-text="提交订单"
      @submit="onSubmit"
    />
  </div>
</template>
           
<script>
import { mapGetters, mapState, mapMutations, mapActions } from 'vuex'
import { getshopcarlist } from '@/api/index.js'
import { get } from 'http'
export default {
  data() {
    return { goodsList: [] }
  },
  created() {
    this.getshopcarlist(this.$store.getters.getIdString)
  },
  mounted() {},
  computed: {
    ...mapState(['goodsId']),
    ...mapGetters(['getGoodsList'])
  },
  methods: {
    /**
     * @name: getshopcarlist
     * @msg: 获取购物车列表
     * @param: idString [string] 商品id字符串
     * @return: [Json]
     */

    async getshopcarlist() {
      var idArr = []
      this.$store.state.goodsList.forEach(item => {
        idArr.push(item.id)
      })
      if (idArr.length <= 0) {
        return
      }
      const { data: res } = await getshopcarlist(idArr.join(','))
      // console.log(res.message, 66666666666)
      this.goodsList = res.message
      // this.addGoodsList(res.message)
    },

    /**
     * @name:changeGoodsCount
     * @msg:修改商品数量
     * @param {type}
     * @return:
     */
    changeGoodsCount(data) {
      // console.log(data, 22222)
      this.updateGoodsList(data)
    },
    ...mapMutations(['updateGoodsList', 'addGoodsList']),
    onSubmit() {},
    deleteGoods() {},
    valueChange(count, { name }) {
      // alert(detail.name)
      // console.log(count, name, 111111111)
      this.$store.commit('updateGoodsInfo', { id: name, count: count })
    },
    removeGoods(id, index) {
      this.goodsList.splice(index, 1)
      this.$store.commit('removeGoods', id)
    }
  }
}
</script>
<style scoped>
</style>